﻿@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.PaginatorModel
@{
    ViewData["Title"] = "Paginator";
}



<h2>Paginator</h2>


<h4>Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-paginator model="@Model.PagerModel" show-info="true" />
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Modal Class">
                <pre><code>
using Microsoft.AspNetCore.Mvc.RazorPages;
using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Pagination;

namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
{
    public class PaginatorModel : PageModel
    {
        public PagerModel PagerModel { get; set; }

        public void OnGet(int currentPage, string sort)
        {
            PagerModel = new PagerModel(100, 10, currentPage, 10, "/Components/Paginator", sort);
        }
    }
}
</code></pre>
            </abp-tab>
            <abp-tab title="Tag Helper" active="true">
                <pre><code>
&lt;abp-paginator model=&quot;Model.PagerModel&quot; show-info=&quot;true&quot; /&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;row mt-3&quot;&gt;
    &lt;div class=&quot;col-sm-12 col-md-5&quot;&gt;
        Showing 80 to 90 of 100 entries.
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-12 col-md-7&quot;&gt;
        &lt;nav aria-label=&quot;Page navigation&quot;&gt;
            &lt;ul class=&quot;pagination justify-content-end&quot;&gt;
                &lt;li class=&quot;page-item &quot;&gt;
                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=7&quot;&gt;Previous&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;page-item &quot;&gt;
                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=1&quot;&gt;1&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;page-item &quot;&gt;
                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=2&quot;&gt;2&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;page-item &quot;&gt;
                    &lt;span class=&quot;page-link gap&quot;&gt;&mldr;&lt;/span&gt;
                &lt;/li&gt;
                &lt;li class=&quot;page-item &quot;&gt;
                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=7&quot;&gt;7&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;page-item active&quot;&gt;
                     &lt;span class=&quot;page-link&quot;&gt;
                        8
                        &lt;span class=&quot;visually-hidden&quot;&gt;(current)&lt;/span&gt;
                     &lt;/span&gt;
                &lt;/li&gt;
                &lt;li class=&quot;page-item &quot;&gt;
                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=9&quot;&gt;9&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;page-item &quot;&gt;
                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=10&quot;&gt;10&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;page-item &quot;&gt;
                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=9&quot;&gt;Next&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
         &lt;!-- nav--&gt;
    &lt;/nav&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>
